SVG.js动画

2023-06-04 23:19| 来源: 网络整理| 查看: 265

设置元素动画与使用attr（）方法处理元素非常相似。唯一的区别是必须包含animate（）方法。

Animate() rect.animate().move(150, 150)

animate（）方法将接受三个参数。第一个是持续时间（duration），第二个是延迟（delay），第三个是何时（when）：

rect.animate(2000, 1000, 'now').attr({ fill: '#f03' })

或者，您可以传递一个对象作为第一个参数，它接受更多的参数：

rect.animate({ duration: 2000, delay: 1000, when: 'now', swing: true, times: 5, wait: 200 }).attr({ fill: '#f03' })

默认情况下，持续时间(duration)将设置为400，延迟(delay)将设置为0，时间(when)设置为after。

when参数指定动画的起点。它可以具有以下值：

now: 在执行此调用后立即播放动画absolute or start: 安排动画在时间轴上的绝对时间运行relative: 安排动画相对于其旧的开始时间播放（对于animate（）-调用不有用）last or after: 在时间轴上最后一个动画之后播放动画。如果没有，则立即播放动画（请参见）

通过再次调用animate，可以将多个动画链接在一起：

rect.animate().attr({ fill: '#f03' }).animate().dmove(50,50)

还可以在动画之间添加延迟：

rect.animate().attr({ fill: '#f03' }).delay(200).animate().dmove(50,50)

当然，这也可以通过向第二次动画添加延迟来完成：

rect.animate().attr({ fill: '#f03' }).animate({delay: 200}).dmove(50,50) SVG.Runner

animate（）方法不会返回目标元素，而是返回SVG的一个实例。Runner具有与任何元素相同的方法和控制运行器的其他方法：

let rect = draw.rect(100, 100) let runner = rect.animate() runner.element() // 返回或设置runner绑定到的元素 runner.timeline() // 返回或设置runner计划的时间线 runner.animate() // 用于动画链接。请参见element.animate（） runner.schedule(timeline, delay, when) // 在timeline上安排runner。如果已设置timeline，则可以跳过 runner.unschedule() // 从timeline中删除runner runner.loop(times, swing, wait) // 将动画循环“times”次，每次循环之间的时间为“wait”毫秒 runner.queue(runOnceFn, runOnEveryStepFn) // 允许您链接非必要动画的函数 runner.during(fn) // 用于将函数绑定到每个动画步骤 runner.after(fn) // 用于绑定动画完成后执行的函数 runner.time() // 返回或设置runner时间 runner.duration() // 返回runner运行的持续时间 runner.loops() // 让您跳转到runner的特定迭代，例如第4个循环中途的3.5 runner.persist() // 让这位runner永远（真）或在特定时间内坚持在时间线上。通常在执行后删除运行程序以清理内存。 runner.position() // 返回或设置runner的当前位置，忽略等待时间（介于0和1之间） runner.progress() // 返回或设置runner的当前位置，包括等待时间（介于0和1之间） runner.step(dt) // 按一定时间步进runner（用于手动步进槽动画） runner.reset() // 将runner设置回零时间，并使用它设置所有动画 runner.finish() // 使runner逐步进入完成状态 runner.reverse() // 向后执行runner runner.ease() // 更改动画的缓和程度 runner.active() // 返回或设置runner的活动状态。不执行非活动runner

runner通常通过调用animate来创建。但是，可以在没有元素的情况下创建runner，然后再设置元素：

var runner = new SVG.Runner(1000) runner.move(100, 100) runner.element(someElement) // Step animation by 20ms runner.step(20) // To animate, we need a timeline on which the runner is run var timeline = new SVG.Timeline() timeline.schedule(runner) 视频讲解

视频讲解

【本文地址】

公司简介

联系我们